<template>
  <div id="backcont">
    <div class="meituan-content">
      <div class="login-cont">
        <div class="meituan-title">登录页</div>
        <div class="meituan-user">
          <p>账号</p>
          <el-input class="inptflex" v-model="account" type="text" placeholder="请输入账号"/>
        </div>
        <div class="meituan-user">
          <p>密码</p>
          <el-input show-password class="inptflex" v-model="password" type="password" placeholder="请输入密码"/>
        </div>
        <div class="reg-view"><p @click="changeClick">{{ regi }}</p></div>
        <el-button type="success" @click="loginBtn" :loading="load" class="meituan-btn" v-if="regi == '注册'">登录</el-button>
        <el-button type="success" @click="regBtn" :loading="load" class="meituan-btn" v-else>注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, getCurrentInstance} from "vue"
import router from "../router/index"
export default {
  name: "login",
  setup() {
    const {proxy} = getCurrentInstance()
    const user = reactive({
      account:'',
      password:'',
      regi:'注册',
      load: false
    })
    const changeClick =  () => {
      console.log(user.regi)
      if (user.regi === '注册') {
        user.regi = '登录'
      } else {
        user.regi = '注册'
      }
    }
    const loginBtn = async () => {
      // 登录
      user.load = true;
      const obj = {username: user.account, password: user.password, regi: ''};
      const uri = proxy.$urls.m().login
      console.log(uri)
      console.log(obj.username, obj.password)
      try {
        const res = await new proxy.$request(uri + '?username=' + obj.username + '&password=' + obj.password, obj).modepost()
        if (res.data.code !== 200) {
          const error = new proxy.$tips(res.data.msg, 'error').msg();
          return {error}
        } else {
          localStorage.setItem('token', res.data.data.token);
          // router.push('/index');
          router.push({name:'index'});
        }
      } catch (e) {
        new proxy.$tips('网络连接失败', 'error').msgBox()
      }
    }
    const regBtn = async () => {
      // 注册
      const obj = {userName: user.account, password: user.password, regi: ''};
      if (user.account === '' || user.account === undefined) {
        const che = new proxy.$tips('请输入账号', 'error').msg()
        return {che}
      }
      if (user.password === '' || user.password === undefined) {
        const che = new proxy.$tips('请输入密码', 'error').msg()
        return {che}
      }
      try {
        const uri = proxy.$urls.m().register
        const res = await new proxy.$request(uri, obj).modepost()
      } catch (e) {
        new proxy.$tips('网络错误', 'error').msgBox()
      }
    }
    return {...toRefs(user), changeClick, loginBtn, regBtn}
  },
}
</script>

<style scoped>

</style>